<template>
  <div>
    case1: <input v-model="message.foo.bar.name" type="text" />
    <hr>
    case2: <input v-model="message.foo.bar.age" type="text" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from "vue";
let message = reactive({
  foo: {
    bar: {
      name: '小满',
      age: 18
    }
  }
});
let message2 = ref<string>('大满');

watch(() => message.foo.bar.name, (newVal, oldVal)=> {
  console.log(newVal, oldVal)
}, {
  // deep: true
  immediate: true, //立即执行一次
  flush: "pre" // pre 组件更新之前调用 sync 同步执行 post组件更新之后执行
});
</script>